<template>
     <el-card class="box-card" shadow='hover'>
       <div class="box-card-util-area"> 
         <el-row :gutter='40'>
        <el-col :span="8" >
          <el-input
            placeholder="根据你设置的别名搜索你的授权文件"
            class="input-with-select"
            v-model="content"
            clearable
            @clear='search()'
          >
            <el-button slot="append" icon="el-icon-search" @click="search(content)" class="search-btn"></el-button>
          </el-input>
        </el-col>
          <el-col :span="8"> <el-button type='primary' @click="onValidatePwd">校验密码</el-button></el-col>
          <el-col :span='8'>
            <el-upload
            accept=".key"
            class="upload-demo"
            action="http://localhost:8890/fileUpload"
            :on-remove="handleRemove"
            multiple
            :limit="9"
            :on-exceed="handleExceed"
            :file-list="fileList">
          </el-upload>
          </el-col>
      </el-row></div>
      <etable :search='searchInfo' ref='etable' :isRefreshTable.sync="isRefresh" :flag="flag"></etable>
     <el-dialog
      title="校验密码"
      :visible.sync="isShowValidateDialog"
      width="30%"
      :before-close="handleClose">
      <el-form :model="passwordForm" ref="passwordValidateForm" label-width="100px" class="password-rule-form">
          <el-form-item
            label="请输入密码"
            prop="password"
            :rules="[
              { required: true, message: '密码不能为空',trigger:'blur'},
            ]"
          >
            <el-input type='password' v-model="passwordForm.password" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="onValidatePassword">确 定</el-button>
      </span>
    </el-dialog>
    </el-card>
</template>

<script>
import{addUser} from 'network/axios'
import Etable from './Etable'
import axios from 'axios'
export default {
        name:'Card',
        components:{Etable},
        created () {
          const axiosInstance = axios.create({
            baseURL: 'http://172.20.81.26:8890'
          })
          axiosInstance({
            method: 'get',
            url:'/'
          })
        },
        data(){
          return{
            fileList: [],
            // 能不能下载授权文件1为能加载,0为不能下载
            flag :0,
            // 密码校验表单
            passwordForm:{
              password: ''
            },
            // 校验对话框的显示与隐藏
            isShowValidateDialog: false,
            // 这里定义了2个变量,content为input输入框里面的值,searchInfo为要发送到子组件etable里面的值
              content:'',
              searchInfo:'',
              // 控制对话框的显示与隐藏
              dialogVisible:false,
              //表单的用户信息
              userInfo:{
                username:'',
                password:'',
                email:'',
                mobile:''
              },
              // 表单验证规则
              addrules:{
                username:[
                  {required:true,message:'用户名不能为空',trigger:'blur'}
                ],
                password:[
                  {required:true,message:'密码不能为空',trigger:'blur'}
                ],
                email:[
                  {type:'email',message:'请输入正确的邮箱格式',trigger:'blur'}
                ],
                mobile:[
                  {pattern:/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,message:'请输入正确的电话格式',trigger:'blur'}
                ]
              },
              //点击确定,需要重新发送网络请求,重新渲染表格,所以要想子组件传值,isRefreshTable为true时表示要重新发送网络请求
              isRefresh:false
          }
        },
        methods:{
          // 点击查询按钮将input输入框里面的值送到子组件etable里面
            search(content){
              console.log(content);
              this.searchInfo=content?content:''
              this.$bus.$emit('search-key', this.searchInfo)
            },
            // 提交表单
            submitUserInfo(){
              this.$refs.userInfo.validate(flag=>{
                      if(!flag)
                      return
                        this.dialogVisible=false
              addUser(this.userInfo).then(res=>{
                const {data:{meta:{status}}}=res
                console.log(status);
                if(status!=201)
                this.$message.error('添加用户失败')
                 this.$message.success('添加用户成功')
                 this.isRefresh=true
              }).catch(err=>{
                console.log(err);
              })
            })
            },
            //点击取消和关闭按钮是会同时重置表单
            resetDialogForm(){
                    this.dialogVisible=false
                    this.$refs.userInfo.resetFields()
                   
            },
          // 校验密码对话框的显示
          onValidatePwd(){
            if(this.flag===1){
              this.$message.warning('您已经成功校验过密码了')
            }else{
            this.isShowValidateDialog = true
            }
          },
                  //校验输入的密码
        onValidatePassword(){
          if(this.passwordForm.password === 'wyks'){
            this.$message.success('密码校验成功,可以下载授权文件或者修改别名了')
            this.flag = 1
            this.isShowValidateDialog = false
          }else{
            console.log('sew')
            this.$message.error('密码不正确!')
          }
        },
        handleClose(){
          this.isShowValidateDialog = false
          this.$refs.passwordValidateForm.resetFields()
        }
        },


              
}
        

      

</script>

<style scoped>
    .search-btn:hover{
            box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    }
    .search-btn{
      position: relative;
      width: 100px;
    }
    .search-btn:active{
      bottom: -1px;
      right: -1px;
    }
</style>